<template>
  <div class="container">
    <div class="title">{{ blogData.blogTitle }}</div>
    <div class="info">
      <span>{{ blogData.blogUserName }}</span>
      <span>{{ blogData.blogCreateTime }}</span>
    </div>
    <div class="titleInfo">{{ blogData.blogTitleInfo }}</div>
    <div v-html="blogData.blogContent"></div>
    <div class="core"></div>
  </div>
</template>

<script lang="ts" setup name="blogPreView">
import { useRoute } from "vue-router";
import { ref, onBeforeMount } from "vue";
import * as api from "@/api/index";
let blogData: any = ref({
  blogTitle: "",
  blogTitleInfo: "",
  blogContent: "",
});
let blogId: any = ref("");
onBeforeMount(() => {
  let route = useRoute();
  blogId.value = route.query.blogId || "";
  getDetail();
});

let getDetail = () => {
  if (blogId.value) {
    // 文章ID存在 则请求数据预览
    api.User.blogDetail({ blogId: blogId.value }).then((res: any) => {
      let data = { ...res.body };
      data.blogContent = data.blogContent.replace(
        /\<img/gi,
        `<img style='width:100%; height: auto;'`
      );
      console.log(data);
      blogData.value = res.body;
    });
  } else {
    // 不存在则访问缓存数据预览
  }
};
</script>

<style lang="less" scoped>
:deep(ol) {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}
:deep(ul) {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}
/* table 样式 */
:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  td,
  th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
    height: 32px;
  }
  th {
    border-bottom: 2px solid #ccc;
    text-align: center;
    background-color: #f1f1f1;
  }
}

/* blockquote 样式 */
:deep(blockquote) {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  min-height: 24px;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
:deep(code) {
  display: inline-block;
  display: inline;
  zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
:deep(pre) {
  code {
    display: block;
  }
}
:deep(a) {
  /* // text-decoration: underline; */
  color: #5592e5;
}
.container {
  width: 70%;
  height: 100%;
  padding: 20px;
  margin: 0px auto;
  overflow-y: auto;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    display: none;
  }
  .title {
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    font-weight: 700;
  }
  .info {
    font-size: 14px;
    text-align: center;
    color: #999;
    span {
      display: inline-block;
      padding: 0px 10px 30px 10px;
    }
  }
  .titleInfo {
    font-size: 18px;
    color: #666;
    text-indent: 36px;
    margin-bottom: 30px;
  }
}
</style>
